<template>
    <!-- 
        NConfigProvider 作为容器，控制其下组件的属性
        local: 表示语言，例如 zhCN 表示中文, enUS 表示英文
        date-local: 表示日期语言，例如 dateZhCn 表示中文
        theme: 表示主题，例如 darkTheme 表示暗黑主题
     -->
    <NConfigProvider :locale="locale" :date-locale="dateLocale" :theme="theme">
        <NCard>
            <NSpace>
                <span>中文: <NSwitch v-model:value="langZhCn" /></span>
                <span>dark: <NSwitch v-model:value="dark" /></span>
            </NSpace>
            <!-- <NButton>nbutton</NButton> -->
            <NDatePicker />
        </NCard>
    </NConfigProvider>
</template>

<script setup lang="ts">
import { darkTheme, dateZhCN, GlobalTheme, NDateLocale, NLocale, zhCN } from 'naive-ui'
import { computed, ref } from 'vue'

const langZhCn = ref<boolean>(false)
const dark = ref<boolean>(false)

const locale = computed<NLocale | null>(() => (langZhCn.value ? zhCN : null))
const dateLocale = computed<NDateLocale | null>(() => (langZhCn.value ? dateZhCN : null))
const theme = computed<GlobalTheme | null>(() => (dark.value ? darkTheme : null))
</script>

<style scoped></style>
